<template>
  <div class="pk-goods">
    <div class="pk-goods-headphoto" :style="{background:'url('+data.avatar+') center center no-repeat'}"></div>
    <div class="pk-goods-title mt-12 clamp1">{{data.fullname}}</div>
    <div class="pk-goods-desc mt-4 gray-color6 clamp2">{{data.title}}</div>
    <div class="pk-goods-telbox mt-24" @click="onCall">
      <div class="pk-goods-telicon"></div>
      <div class="pk-goods-phoneicon"></div>
      <div class="f-12 mt-8">通话</div>
    </div>
    <div>
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted, defineProps, defineEmits } from 'vue'
  const emits = defineEmits(['onCall'])
  defineProps({
    data:{
      type:Object,
      default: () => {}
    }
  })

  const onCall = (e) => {
    emits('onCall')
  }
</script>

<style lang="scss" scoped>
.pk-goods{
  display: flex;
  flex-direction: column;
  align-items:center;
  cursor: pointer;
  &-headphoto{
    width: 104px;
    height: 104px;
    border-radius: 104px;
    background: url("@/assets/usericon.png") center center no-repeat;
    background-size: 104px auto!important; 
    // border:#ddd 1px solid;
    box-shadow: 0px 0px 0px 1px rgba(140, 140, 140, 0.2);
  }
  &-title{
    font-size: 16px;
    font-weight: bold;
    color: #000;
  }
  &-desc{
    height: 40px;
    font-size: 14px;
    word-break: break-all;
    line-height: 20px;
    text-align: center;
  }
  &-telbox{
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    color: #737a87;
  }
  &-telicon{
    width: 60px;
    height: 60px;
    border-radius: 60px;
    background: url("@/assets/CallWrapper.svg") center center no-repeat;
    background-size: 60px auto; 
  }
  &-phoneicon{
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 60px;
    background: url("@/assets/Phone.svg") center center no-repeat;
    background-size: 30px auto; 
  }
}
</style>